<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">
    <style>
        .toast-center-center {
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -150px;
        }

    </style>
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen  animated fadeInDown">
    <div>
        <div>
            <h1 class="logo-name">外汇</h1>
        </div>
        <h3>修改密码</h3>
        <form class="m-t" role="form">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="邮箱地址" required="required" id="email">
            </div>
            <div class="form-group">
                <div class="form-group" style="width: 174px;float: left">
                    <input type="text" class="form-control" placeholder="验证码" required="required" id="key">
                </div>
                <div class="form-group" style="float: right">
                    <input type="button" style="width: 120px;float: left" class="btn btn-info" id="getKey" value="获取验证码">
                </div>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" placeholder="新密码" required="required" id="newPassword1">
                <span hidden id="error-log-password1"></span>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" placeholder="确认密码" required="required" id="newPassword2">
                <span hidden id="error-log-password2"></span>
            </div>
            <button type="button" class="btn btn-primary block full-width m-b" id="key-submit">提交</button>
        </form>
    </div>
</div>
<script src="/js/jQuery.min.js"></script>
<script src="/js/plugins/toastr/toastr.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script>
    $(function() {
        var wait =60;
        toastr.options = {
            "closeButton": true,// 是否显示关闭按钮
            "positionClass": "toast-center-center",// 弹出窗的位置
            "showDuration": "1000",// 显示的动画时间
            "hideDuration": "1000",// 消失的动画时间
            "timeOut": "1000",// 弹窗展现时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut", //消失时的动画方式
            "allowHtml":true,// 允许弹窗内容包含 HTML 语言
        };

        function time(o) {
            if (wait === 0) {
                o.removeAttribute("disabled");
                o.value = "获取验证码";
                wait = 60;
            }else {
                o.setAttribute("disabled",true);
                o.value = "重新发送(" + wait + "s)";
                wait--;
                setTimeout(function() {
                    time(o);
                },1000)
            }
        }
        $("#getKey").click(function() {
            if ($("#email").val() === "") {
                toastr.warning('请输入邮箱地址！');
                return;
            }
            if(!validateEmail()){
                toastr.warning('请正确填写邮箱,仅支持网易163邮箱！');
                return;
            }
            time(this);
            $.ajax({
                url : "/user/sendEmail",
                type : "post",
                data : {
                    userName : window.sessionStorage.getItem("userName"),
                    email : $("#email").val(),
                },
                dataType : "json",
                success : function(data) {
                    if (data.state === 200){
                        toastr.success('验证码已发送到您的邮箱，会有一定的延迟哦');
                        $("#userName").attr("disabled");
                        $("#email").attr("disabled");
                    }else {
                        toastr.error(data.message);
                    }
                }
            })
        });
        function validateEmail() {
            var email = $("#email").val();
            var re = /^[^\s@]+@163.com$/;
            if (email === "") {
                return false;
            }
            return re.test(email);
        }
        $("#newPassword1").blur(function() {
            var reg = /^[a-zA-z0-9]{6,12}$/;
            if (this.value === ""){
                $('#error-log-password1').show().text('请输入密码').css("color","red");
                return false;
            }
            if (reg.test(this.value) === false) {
                $('#error-log-password1').show().text('密码必须为6-12位字符型数据').css("color","red");
                return false;
            }else {
                $('#error-log-password1').hide();
            }
        });
        $("#newPassword2").blur(function() {
            var password = $("#newPassword1").val();
            if (password === ""){
                $('#error-log-password2').show().text('请输入密码').css("color","red");
                return false;
            }
            if (password !== this.value) {
                $('#error-log-password2').show().text('两次输入密码不一致').css("color","red");
                return false;
            }else {
                $('#error-log-password2').hide();
            }
        });
        $("#key-submit").click(function() {
            if ($("#email").val() === "" || $("#key").val() === "" || $("#newPassword1").val() === "" || $("#newPassword2").val() === ""){
                toastr.warning('请输入相关信息');
                return;
            }
            $.ajax({
                url : "/user/updatePwdByKey",
                type : "post",
                data : {
                    username : window.sessionStorage.getItem("userName"),
                    email : $("#email").val(),
                    key : $("#key").val(),
                    password : $("#newPassword1").val(),
                },
                dataType : "json",
                success : function(data) {
                    if (data.state === 200){
                        toastr.success('修改成功');
                        window.open("/login","_blank");
                        window.close();
                    }else {
                        toastr.error(data.message);
                    }
                }
            })
        })
    })
</script>
</body>
</html>
